<template>
  <div style="display: flex;  flex-direction: column;">
    <div style="display: flex; max-height: 20px">
      <h5>采购方式</h5>
      <el-select v-model="procurementMethod" placeholder="请选择" style="margin-top: -5px;margin-left: 10px; width: 120px">
        <el-option :key="''" :label="'全部'" :value="''"></el-option>
        <el-option :key="'磋商'" :label="'磋商'" :value="'磋商'"></el-option>
        <el-option :key="'委托'" :label="'委托'" :value="'委托'"></el-option>
        <el-option :key="'竞价'" :label="'竞价'" :value="'竞价'"></el-option>
      </el-select>
      <h5 style="margin-left: 30px">项目编号</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入项目编号" v-model="projectNumber"></el-input>
      <h5 style="margin-left: 30px">项目名称</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入项目名称" v-model="projectName" ></el-input>
      <el-button type="primary" style="margin-top: -5px; margin-left: 30px" icon="el-icon-search" @click="init">查询</el-button>
      <el-button type="warning" style="margin-top: -5px; margin-left: 10px" icon="el-icon-refresh" @click="reset">重置</el-button>
    </div>
    <div style="display: flex; max-height: 50px">
      <el-button type="primary" @click="handleAdd" style="margin-top: 15px"><i class="el-icon-circle-plus-outline"></i>添加采购项目</el-button>
      <el-button type="primary" @click="exp" style="margin-top: 15px">导出所有项目<i class="el-icon-top"></i></el-button>
      <el-button type="primary" @click="exportExcel" style="margin-top: 15px"><i class="el-icon-top"></i>导出当前页项目</el-button>
    </div>
    <div style="display: flex;">
      <el-table :data="tableData" style="width: 100%" height="500">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column fixed label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column fixed prop="projectNumber" label="项目编号" width="120"></el-table-column>
        <el-table-column fixed prop="projectName" label="项目名称" width="150"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="50"></el-table-column>
        <el-table-column prop="budget" label="预算（万元）" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="70">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="danger" effect="circle">待进行</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning" effect="circle">待公告</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success" effect="circle">已公告</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="info" effect="circle">待公示</el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="primary" effect="circle">已公示</el-tag>
            <el-tag v-else type="success" effect="circle">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="procurementType" label="采购类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.procurementType === '公开采购'">公开采购</span>
            <span v-else-if="scope.row.procurementType === '单一来源'">单一来源</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="fundingSource" label="资金来源" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.fundingSource === '预算'">预算</span>
            <span v-else-if="scope.row.fundingSource === '拨款'">拨款</span>
            <span v-else-if="scope.row.fundingSource === '其他'">其他</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyingDepartment" label="申请科室" width="100"></el-table-column>
        <el-table-column prop="applicant" label="申请人" width="100"></el-table-column>
        <el-table-column prop="procurementMethod" label="采购方式" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.procurementMethod === '磋商'">磋商</span>
            <span v-else-if="scope.row.procurementMethod === '委托'">委托</span>
            <span v-else-if="scope.row.procurementMethod === '竞价'">竞价</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectType" label="项目类型" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.projectType === '工程'">工程</span>
            <span v-else-if="scope.row.projectType === '耗材'">耗材</span>
            <span v-else-if="scope.row.projectType === '设备'">设备</span>
            <span v-else-if="scope.row.projectType === '维护'">维护</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="tenderOfficer" label="招标责任人" width="100"></el-table-column>
        <el-table-column prop="meetingRoom" label="会议室" width="100"></el-table-column>
        <el-table-column label="操作" width="250" fixed="right" >
          <template slot-scope="scope">
            <template v-if="scope.row.status !== 5" >
              <el-button type="success" @click="goToConsole(scope.row)">操作台</el-button>
              <el-button type="warning" @click="handleEdit(scope.row)">编辑</el-button>
              <el-popconfirm
                  confirm-button-text='确定'
                  cancel-button-text='我再想想'
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定要删除这些吗？"
                  @confirm ="() => delproject(scope.row.projectId)"
              >
                <el-button type="danger" slot="reference" style="margin-left: 10px">删除<i class="el-icon-remove-outline"></i></el-button>
              </el-popconfirm>
            </template>
            <el-button v-else type="primary" @click="handleLook(scope.row)" style="width: 100px">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;margin-left: 800px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[10, 15, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog title="添加/编辑采购项目"
               :visible.sync="dialogFormVisible"
               @close="handleDialogClose"
               :custom-class="'slide-right-dialog'"
    >
      <el-form :model="form" :rules="rules" :ref="form" label-width="130px" class="demo-ruleForm custom-form">
        <el-form-item label="项目编号" prop="projectNumber">
          <el-input v-model="form.projectNumber"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="form.projectName"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-select v-model="form.quantity">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目预算(万元)" prop="budget">
          <el-input v-model="form.budget"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" prop="projectType">
          <el-radio-group v-model="form.projectType">
            <el-radio-button :label="'工程'" :value="'工程'">工程</el-radio-button>
            <el-radio-button :label="'耗材'" :value="'耗材'">耗材</el-radio-button>
            <el-radio-button :label="'设备'" :value="'设备'">设备</el-radio-button>
            <el-radio-button :label="'维护'" :value="'维护'">维护</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="采购方式" prop="procurementMethod">
          <el-radio-group v-model="form.procurementMethod">
            <el-radio-button :label="'磋商'" :value="'磋商'">磋商</el-radio-button>
            <el-radio-button :label="'委托'" :value="'委托'">委托</el-radio-button>
            <el-radio-button :label="'竞价'" :value="'竞价'">竞价</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="采购类型" prop="procurementType">
          <el-radio-group v-model="form.procurementType">
            <el-radio-button :label="'公开采购'" :value="'公开采购'">公开采购</el-radio-button>
            <el-radio-button :label="'单一来源'" :alue="'单一来源'">单一来源</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="资金来源" prop="fundingSource">
          <el-select v-model="form.fundingSource" placeholder="请选择">
            <el-option
                v-for="item in fundingSourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="招标负责人" prop="tenderOfficer">
          <el-select v-model="form.tenderOfficer" placeholder="请选择" @change="onTenderOfficerChange">
            <el-option
                v-for="item in tenderOfficerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNumber">
          <el-input v-model="form.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="name">
          <el-select v-model="form.tenderOfficer" placeholder="请选择" @change="onTenderOfficerChange">
            <el-option
                v-for="item in tenderOfficerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系科室" prop="department">
          <el-input v-model="form.department"></el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="applicant">
          <el-select v-model="form.applicant" placeholder="请选择" @change="onApplicantChange">
            <el-option
                v-for="item in applicantOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请科室" prop="applyingDepartment">
          <el-input v-model="form.applyingDepartment"></el-input>
        </el-form-item>
        <el-form-item label="磋商文件" prop="consultationFileUrl">
          <el-upload
              :action="'http://' + serverIp() + ':8081/jdyfy/file/upload'"
              :show-file-list="true"
              :on-success="handleAnnounFile"
              :on-error="handleAnnounFileError">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">请上传不超过50mb的文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="采购内容" prop="procurementText">
          <el-input type="textarea" v-model="form.procurementText"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">确定</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="查看采购项目"
               :visible.sync="dialogViewVisible"
               :custom-class="'slide-right-dialog'"
    >
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="项目编号">
          <el-input v-model="form.projectNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="form.projectName" readonly></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-select v-model="form.quantity" disabled>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目预算(万元)">
          <el-input v-model="form.budget" readonly></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-radio-group v-model="form.projectType" disabled>
            <el-radio-button :label="'工程'" :value="'工程'">工程</el-radio-button>
            <el-radio-button :label="'耗材'" :value="'耗材'">耗材</el-radio-button>
            <el-radio-button :label="'设备'" :value="'设备'">设备</el-radio-button>
            <el-radio-button :label="'维护'" :value="'维护'">维护</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="采购方式">
          <el-radio-group v-model="form.procurementMethod" disabled>
            <el-radio-button :label="'磋商'" :value="'磋商'">磋商</el-radio-button>
            <el-radio-button :label="'委托'" :value="'委托'">委托</el-radio-button>
            <el-radio-button :label="'竞价'" :value="'竞价'">竞价</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="采购类型">
          <el-radio-group v-model="form.procurementType" disabled>
            <el-radio-button :label="'公开采购'" :value="'公开采购'">公开采购</el-radio-button>
            <el-radio-button :label="'单一来源'" :value="'单一来源'">单一来源</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="资金来源">
          <el-select v-model="form.fundingSource" disabled>
            <el-input label="预算" value="预算"></el-input>
            <el-input label="拨款" value="拨款"></el-input>
            <el-input label="其他" value="其他"></el-input>
          </el-select>
        </el-form-item>
        <el-form-item label="招标负责人" prop="tenderOfficer">
          <el-select v-model="form.tenderOfficer" placeholder="请选择" @change="onTenderOfficerChange" readonly>
            <el-option
                v-for="item in tenderOfficerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="name">
          <el-select v-model="form.tenderOfficer" placeholder="请选择" @change="onTenderOfficerChange" readonly>
            <el-option
                v-for="item in tenderOfficerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系科室" prop="department">
          <el-input v-model="form.department" readonly></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-select v-model="form.applicant" placeholder="请选择" @change="onApplicantChange">
            <el-option
                v-for="item in applicantOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请科室">
          <el-input v-model="form.applyingDepartment" readonly></el-input>
        </el-form-item>
        <el-form-item label="磋商文件" prop="consultationFileUrl" readonly>
          <a :href="form.consultationFileUrl" target="_blank" v-if="form.consultationFileUrl">磋商文件</a>
        </el-form-item>
        <el-form-item label="采购内容">
          <el-input type="textarea" v-model="form.procurementText" readonly></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogViewVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

import {addProject, deleteProject, getProjectPage} from '@/api/project.js'
import {getUserByRoleId, getUserByName} from "@/api/user";
import * as XLSX from 'xlsx';
import {serverIp} from "../../../../public/config.js";

export default {
  name: "PurchProjObli",
  data() {
    return {
      procurementMethod:'',
      projectNumber: "",
      projectName: "",
      tableData: [],
      pageNum: 1,
      total: 0,
      pageSize: 10,
      fileUrl: '',
      dialogFormVisible: false,
      dialogViewVisible: false,
      tenderOfficerOptions: [],
      applicantOptions: [],
      fundingSourceOptions: [
          { label: '预算', value: '预算' },
          { label: '拨款', value: '拨款' },
          { label: '其他', value: '其他' },
      ],
      savedTenderOfficer: '',
      form: {
        projectNumber: '',
        projectName: '',
        quantity: 1,//数量
        budget: '',//预算
        projectType: '',
        procurementMethod: '',//采购方式
        procurementType: '',//采购类型
        phoneNumber: '',//联系电话
        name: '',//联系人
        department: '',//联系科室
        applyingDepartment: '',//申请科室
        applicant: '',//申请人
        //磋商文件
        //采购时间
        desc: '',//采购内容
      },
    }
  },
  created() {
    this.init();
  },
  methods: {
    serverIp() {
      return serverIp
    },
    init() {//初始化页面
      getProjectPage(this.pageNum, this.pageSize,this.projectNumber,this.projectName,this.procurementMethod)
          .then(res => {
            this.tableData = res.records;
            this.total = res.total;
          })
    },
    delproject(id) { //删除项目
      let ids = [id]
      deleteProject(ids).then(res => {
        if(res) {
          this.$message.success('删除成功')
          this.init()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    exp() {
      window.open(`http://${serverIp}:8081/jdyfy/project/export`)
    },
    exportExcel() {
      // 将表格数据转化为 Excel 格式
      const headers = ['项目编号', '项目名称', '数量', '预算（万元）', '状态', '采购方式','采购类型','资金来源','申请科室','申请人','项目类型','招标负责人'];
      const rows = this.tableData.map(item => [
          item.projectNumber,
          item.projectName,
          item.quantity,
          item.budget,
          this.getStatusText(item.status),
          item.procurementMethod,
          item.procurementType,
          item.fundingSource,
          item.applyingDepartment,
          item.applicant,
          item.projectType,
          item.tenderOfficer
      ]);

      // 创建一个工作表并转化为工作簿
      const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '项目数据');

      // 导出 Excel 文件
      XLSX.writeFile(wb, '项目数据.xlsx');
    },
    getStatusText(status) {
      // 将状态数字转化为文本
      switch (status) {
        case 0: return '待进行';
        case 1: return '待公告';
        case 2: return '已公告';
        case 3: return '待公示';
        case 4: return '已公示';
        case 5: return '已完成';
        case 6: return '已归档';
      }
    },
    handleSizeChange(val) {//改变页码
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {//改变每页显示条数
      this.pageNum = val;
      this.init();
    },
    getTender(){
      getUserByRoleId(2).then(res => {
        this.tenderOfficerOptions = res.map(item => ({
          value: item.name,    // 后端的数据值
          label: item.name,  // 显示的名称
        }))
      })
      getUserByRoleId(4).then(res => {
        this.applicantOptions = res.map(item => ({
          value: item.name,    // 后端的数据值
          label: item.name,  // 显示的名称
        }))
      })
    },
    handleAdd() {// 添加
      this.getTender()
      this.dialogFormVisible=true
      this.form={
        projectNumber: '',
        projectName: '',
        quantity: 1,//数量
        budget: '',//预算
        status: 0,
        annoStatus: 0,
        projectType: '',
        procurementMethod: '',//采购方式
        procurementType: '',//采购类型
        fundingSource: '',
        phoneNumber: '',//联系电话
        name: '',//联系人
        department: '',//联系科室
        applyingDepartment: '',//申请科室
        applicant: '',//申请人
        //磋商文件
        //采购时间
        desc: '',//采购内容
      }
    },
    onTenderOfficerChange(value) { //点击选择项目责任人时触发
      getUserByName(value).then(res => {
        this.form.phoneNumber = res.phoneNumber
        this.form.department = res.department
      })
    },
    onApplicantChange(value) { //点击选择申请人时触发
      getUserByName(value).then(res => {
        this.form.applyingDepartment = res.department
      })
    },
    save() {//确定
      this.form.consultationFileUrl = this.fileUrl !== '' ? this.fileUrl : this.form.consultationFileUrl
      this.fileUrl = ''
      addProject(this.form).then(res => {
        if(res) {
          this.$message.success('操作成功')
          this.dialogFormVisible=false
          this.init()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    async handleLook(row) { // 查看
      console.log(row)
      this.form = row;
      await getUserByName(row.tenderOfficer).then(res => {
          this.form.phoneNumber = res.phoneNumber
          this.form.department = res.department
      })
      console.log(this.form)
      this.dialogViewVisible = true
    },
    async handleEdit(row) {//编辑
      this.getTender()
      this.form = row
      await getUserByName(row.tenderOfficer).then(res => {
        this.form.phoneNumber = res.phoneNumber
        this.form.department = res.department
      })
      this.dialogFormVisible = true
    },
    handleDialogClose() { //监听对话框，对话框关闭触发
      // 在对话框关闭时执行
    },
    goToConsole(row) {
    this.$router.push({
      path: '/console',
      query: { row } // 通过 query 参数传递
    });
    },
    reset() {//重置表单
      this.procurementMethod = ''
      this.projectNumber = "";
      this.projectName = "";
      this.init();
    },
    handleAnnounFile(row){
      this.fileUrl = row
      this.$message.success('文件添加成功')
    },
    handleAnnounFileError(err, file, fileList) {
      // 上传失败的处理逻辑
      this.$message.error('文件上传失败，请重试');
    },
  }
}
</script>

<style scoped>
>>> .slide-right-dialog {
  top: -115px;
  right: 0;
  margin: 0;
  position: absolute;
  height: 1000px;
  width: 600px;
  animation: slide-right 0.3s ease;
}
>>> .slide-right-dialog .el-dialog__title {
  font-size: 14px; /* 调整对话框正文内容的字体大小 */
}
@keyframes slide-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

>>> .el-radio-button__inner {
  font-size: 11px; /* 修改字体大小 */
  padding: 3px 11px; /* 调整按钮的内边距 */
}
</style>

